<template>
	<view>
		<!-- 吸顶搜索框   -->
		<u-sticky>
			<view style="margin-bottom: 10rpx;position: relative;top:-4rpx;left:-1rpx">
				<u-search :clearabled="true" height="50" shape="circle" placeholder="可以根据农场名称搜索哦~" bgColor="#dfe6e9"
					:actionStyle="actionStyle" v-modal="searchModel" @search="search" @custom="search">
				</u-search>
			</view>
		</u-sticky>
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<scroll-view scroll-y @scrolltolower="loadMoreData">
					<view>
						<view>
							<!-- 轮播区域 -->
							<view class="swiperItem">
								<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
									:interval="interval" :duration="duration" indicator-active-color="#fff">
									<swiper-item v-for="(item ,index) in bannerList" :key="item.id"
										@click="linkOthers(item.url)">
										<navigator :url="item.url">
											<u--image :showLoading="true" :src="imgapi+item.path" width="100%">
											</u--image>
										</navigator>
									</swiper-item>
								</swiper>
							</view>

							<!-- 租赁列表 -->
							<view class="recommendedBox">
								<!--<view class="recommendedTitle">土地租赁专区</view>-->
								<view>
									<view class="recommendeDishesBox" @tap="goDetail(item.id,item.juli)"
										v-for="(item,index) in rentList" :key="item.id">
										<view style="position: relative">
											<view>
												<image class="recommendeDishesImg" :src="imgapi+item.avatar">
												</image>
											</view>
											<view v-if="!service.check.isNull(item.storeAvatar)" style="
                        position: absolute;
                        top: -30rpx;left: -30rpx;
                        background-color: #2f3542cf;border-radius: 25%">
												<view style="margin: 40rpx 15rpx 15rpx 40rpx">
													<u-avatar :src="imgapi  + item.storeAvatar" size="40">
													</u-avatar>
												</view>
											</view>
											<view style="
                        position: absolute;
                        bottom:4px;
                        background-color: #2f343eb0;
                        text-align: center;
                        width: 100%;height: 5vh">
												<text style="
                          font-size: 34rpx;
                          font-weight: bold;
                          letter-spacing: 6rpx;
                          color: #ecf0f1;
                          line-height: 5vh;">
													{{ item.plotName }}
												</text>
											</view>

											<view style="position: absolute;top: -15rpx;right: -40rpx">
												<view style="
                          background-color: #b8e994bd;
                          border-radius: 20rpx">
													<text style="display: inline-block;
                            color: #000000FF;
                            margin: 20rpx 50rpx 5rpx 20rpx;
                            font-weight: bold;
                            letter-spacing: 0.1em;">
														{{item.name}}
													</text>
												</view>

											</view>
										</view>

										<!-- 正文内容 -->
										<view style="margin: 0 20rpx;position: relative;">
											<view v-if="!service.check.isNull(item.plotOverView)"
												style="letter-spacing: 0.1em;margin-top: 10rpx">
												<u--text color="#a4b0be" :text="item.plotOverView" :lines=2>
												</u--text>
											</view>

											<view style="width: 80%;padding-bottom: 30rpx">
												<view style="margin: 20rpx 0 20rpx 0"
													v-if="!service.check.isNull(item.plotLabel)">
													<uni-tag :text=val :type="getType(i)"
														v-for="(val,i) in item.plotLabel" :key=i
														style="margin-right: 10px;">
													</uni-tag>
												</view>
												<view v-if="!service.check.isNull(item.plotAddress)">
													<uni-icons color="#7bed9f" type="location" size="28">
													</uni-icons>
													<text style="
                          letter-spacing: 0.05em;
                          font-weight: 550;color:#636e72;
                          position: relative;top: -6rpx">
														{{item.plotAddress}}
													</text>
												</view>
											</view>

											<view v-if="!service.check.isNull(item.juli)" class="bottom_card_font"
												style="left: -2%">
												<u-text bold="true" color="#bdc3c7" size="14"
													:text=service.html.distanceText(item.juli)>
												</u-text>
											</view>

											<view v-if="!service.check.isNull(item.rentalMinPrice)"
												class="bottom_card_font">
												<u-text mode="price" bold="true" color="#ffd32a" size="18"
													:text="item.rentalMinPrice">
												</u-text>
											</view>
										</view>
									</view>
								</view>
							</view>


							<!-- 下拉加载更多 -->
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>
					</view>
				</scroll-view>
			</block>
		</skeleton>
	</view>

</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import service from "@/utils/service";
	export default {
		components: {
			Skeleton
		},
		data() {
			return {
				service: service,
				bannerList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				ifBottomRefresh: false, //下拉加载
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},

				params: { //请求默认值
					pageNo: 1,
					pageSize: 10,
					type: 1,
					status: ""
				},

				rentList: [], //租聘列表
				imgapi: "",
				status: 'more',
				timer: null,

				latitude: uni.getStorageSync("dingwei").latitude, //纬度
				longitude: uni.getStorageSync("dingwei").longitude, //经度

				loading: true,
				skeleton: [
					'card-lg',
					'card*5',
				], //骨架屏
				/* 搜索框右侧按钮样式 */
				actionStyle: {
					backgroundColor: '#dfe6e9',
					height: '54px',
					fontSize: '30rpx',
					fontWeight: 'bold',
					letterSpacing: '0.1em',
					marginLeft: '0',
					color: '#636e72',
					lineHeight: '54px',
					position: 'relative',
					left: '-2px',
					top: '-1px'
				},
				searchKey: '',
				searchModel: '',
				isSearch: false,
			}
		},
		onPullDownRefresh() {
			this.getBanner()
			this.cleanList()
			this.getList()
		},
		onLoad() {
			this.getBanner()
			this.cleanList()
			this.getList()
		},

		methods: {
			// 标签颜色
			getType(index) {
				switch (++index % 4) {
					case 0:
						return "error"
					case 1:
						return "success"
					case 2:
						return "default"
					case 3:
						return "warning"
				}
			},
			// 跳转其他页面
			linkOthers(url) {
				console.log('url', url);
				// 此处填写你要跳转的绑定公众号文章的链接地址或者已经在小程序后台配置好业务域名的地址
				// var url = "https://www.baidu.com";
				uni.navigateTo({
					// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
					url: "../growVegetables/linkOthers?url=" + encodeURIComponent('https://' + url)
				});
			},
			//获取轮播图
			getBanner() {
				this.$axios({
					url: "user/public/bannerList",
					method: "post",
					data: {
						pageNo: 1,
						pageSize: 10,
						type: 0,
					}
				}).then((res) => {
					console.log(res);
					this.bannerList = res.result.list
				})
			},
			// 清空数据
			cleanList() {
				this.rentList = [];
				this.params = {
					pageNo: 1,
					pageSize: 10,
					type: 1
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},

			// 获取列表数据
			getList() {
				this.imgapi = this.$reqConfig.URLIMAGE
				let data = {
					pageNo: this.params.pageNo,
					pageSize: this.params.pageSize,
					lat: this.latitude || "",
					lng: this.longitude || "",
				}
				if (!service.check.isNull(this.searchKey)) {
					data.plotName = this.searchKey;
					if (this.isSearch) {
						this.isSearch = false
						uni.showLoading({
							title: '搜索中....',
							mask: true
						})
					}
				}
				this.$axios({
					url: "user/public/regionList",
					method: "post",
					data: data
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据
					if (res.result.pages >= this.params.pageNo) {
						this.params.pageNo++;
						if (this.ifBottomRefresh) {
							this.rentList = this.rentList.concat(res.result.list)
							this.ifBottomRefresh = false
						} else {
							this.rentList = res.result.list
						}
						this.rentList = this.rentList.map(item => {
							if (!service.check.isNull(item.plotLabel)) {
								item.plotLabel = JSON.parse(item.plotLabel)
							}
							return item;
						})
					} else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					// 骨架屏取消
					this.loading = false;
					uni.stopPullDownRefresh()
				}).finally(() => {
					uni.hideLoading();
				})
			},

			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if (!this.timer) {
					this.timer = setTimeout(() => {
						if (this.status != 'noMore') {
							console.log("触底")
							this.status = 'loading';
							this.ifBottomRefresh = true
							//正式服去掉这个延时器
							this.getList()
						} else {
							console.log('123')
							this.status = "noMore"
						}
						this.timer = null
					}, 500)
				}
			},

			goDetail(id, juli) {
				console.log('2', id);
				uni.navigateTo({
					url: `./indexDetail?id=${id}&juli=${juli}`
				})
			},
			search(v) {
				console.log("搜索关键词 : ", v)
				this.searchKey = v;
				if (!service.check.isNull(v)) {
					this.isSearch = true
				}
				this.params.pageNo = 1
				this.params.pageSize = 10
				this.getList();
			}
		}
	}
</script>

<style scoped>
	.index-skeleton {
		padding: 20px;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: scroll;
		z-index: 99999;
	}

	.swiper {
		width: 100%;
		overflow: hidden;
	}

	.swiperimg {
		width: 100%;
	}

	.recommendedBox {
		width: 100%;
		margin-top: 30rpx;
		/* height: 100rpx; */
		/* height: calc(100vh - 350rpx); */
	}

	.recommendedTitle {
		/* width: 750rpx; */
		background-color: #fff;
		text-align: center;
		color: #3cc51f;
		font-weight: bold;
		margin: 20rpx 0;
		font-size: 40rpx;
	}

	.recommendeDishesBox {
		width: 94%;
		/* height: 450rpx; */
		background-color: #fff;
		padding-bottom: 20rpx;
		margin: 0 auto 30rpx auto;
		border-radius: 20rpx;
		box-shadow: 0 15px 15px -15px #636e72;
		overflow: hidden;
	}

	.price {
		font-size: 28rpx;
		color: red;
		font-weight: bold;
	}

	.recommendeDishesImg {
		width: 100%;
		height: 25vh;
	}

	.swiperItem {
		/* padding: 0 10rpx; */
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.swiperItem swiper {
		width: 100%;
		height: 28vh;
	}

	/deep/.uni-tag--success {
		background: linear-gradient(131deg, #00b09b, #96c93d);
	}

	/deep/.uni-tag--default {
		background: linear-gradient(252deg, #d7b9f5, #948ce6);
	}

	/deep/.uni-tag--warning {
		background: linear-gradient(131deg, #3c8ce7, #00eaff);

	}

	/deep/.uni-tag--error {
		background: linear-gradient(135deg, #fd6e6a, #ffc600);
	}

	.bottom_card_font {
		margin: 0 0 10rpx 10rpx;
		position: absolute;
		right: -1%;
		bottom: -25rpx
	}
</style>
